import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../utils/G.dart';

class ProductSearch extends StatefulWidget {
  const ProductSearch({Key? key}) : super(key: key);

  @override
  _ProductSearchState createState() => _ProductSearchState();
}

class _ProductSearchState extends State<ProductSearch> {
  String _keyword = "";
  List list = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('商品搜索'),
            centerTitle: true,
            elevation: 0,
            bottom: PreferredSize(
                child: _renderSearchBox(),
                preferredSize: const Size.fromHeight(50.0))),
        body: ProductSearchList(list: list));
  }

  Widget _renderSearchBox() {
    return Container(
      color: Theme.of(context).primaryColor,
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
      child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(30.0)),
          child: Container(
              height: 45,
              color: Colors.white,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(width: 10),
                  const Icon(Icons.search, color: Colors.grey),
                  Expanded(
                      child: Container(
                          alignment: Alignment.center,
                          width: 600.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: '输入你感兴趣的内容',
                                border: InputBorder.none),
                            onChanged: (value) {
                              _keyword = value;
                              // print('搜索内容：'+value.toString());
                            },
                          ))),
                  InkWell(
                      onTap: () async {
                        // 执行搜索
                        var res = await G.api.product
                            .getSearchList(keyword: _keyword);
                        if (res['status'] == 200) {
                          // print('执行搜索');
                          // print(res['data']);
                          setState(() {
                            list = res['data'];
                          });
                        }
                      },
                      child: const Text('搜索')),
                  const SizedBox(width: 10),
                ],
              ))),
    );
  }
}

// 商品搜索的列表
class ProductSearchList extends StatefulWidget {
  List list;
  ProductSearchList({Key? key, required List this.list}) : super(key: key);

  @override
  _ProductSearchListState createState() => _ProductSearchListState();
}

class _ProductSearchListState extends State<ProductSearchList> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: widget.list.isNotEmpty
          ? widget.list.map((item) {
              return InkWell(
                  onTap: () {
                    // 跳转到商品详情页
                    Map<String, dynamic> p = {'id': item['id']};
                    G.router.navigateTo(
                        context, '/product_detail' + G.parseQuery(params: p));
                  },
                  child: _renderListItem(item));
            }).toList()
          : [
              Container(
                  padding: const EdgeInsets.fromLTRB(20, 50, 20, 50),
                  child: const Center(child: Text('空空如也~')))
            ],
    );
  }

  Widget _renderListItem(Map item) {
    return Container(
        margin: const EdgeInsets.fromLTRB(5, 15, 5, 0),
        decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(10.0)),
            boxShadow: [
              BoxShadow(
                  color: Colors.grey[300]!,
                  offset: const Offset(4, 4),
                  blurRadius: 8.0)
            ]),
        child: Row(
          children: [
            ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                child: G.imageWidget(
                  item['image'],
                  width: 100,
                  height: 100,
                )),
            Expanded(
                child: Container(
                    alignment: Alignment.topLeft,
                    color: Colors.white,
                    height: 100,
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          item['store_name'],
                          style: const TextStyle(fontSize: 14),
                          overflow: TextOverflow.ellipsis,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "￥ " + item['price'].toString(),
                              style: TextStyle(
                                  fontSize: 16,
                                  color: Theme.of(context).primaryColor),
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              "已售：" + item['sales'].toString(),
                              style: const TextStyle(
                                  fontSize: 12, color: Colors.grey),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        )
                      ],
                    )))
          ],
        ));
  }
}
